<template>
  <div>
   <home-head/>
   
    <div class="wrap">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="banner in banners"
          :key="banner.id"
        >
          <img :src="banner.picUrl"/>
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <!-- 宫格导航 -->
      <van-grid 
        :clickable="true"
      >
        <van-grid-item 
          v-for="nav in cates"
          :key="nav.id"
          :icon="nav.icon" 
          :to="{
            path: '/itemList',
            query: {
              cateId: nav.id
            }
          }"
          :text="nav.name" />
      </van-grid>
      <!-- /宫格导航 -->
      <!-- 推荐商品 -->
      <Recommend 
        @click="enterDetail"
        @click_add_icon="add_cart"
        :items="recommendItems"/>
      <!-- /推荐商品 -->
      </van-pull-refresh>
    </div>
   
   <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import MyTabbar from 'components/MyTabbar'
import HomeHead from './components/HomeHead'
import Recommend from './components/Recommend'
import { fetchHomeBanner, fetchAllCates, fetchItems } from 'api'
import { Toast } from 'vant';
/* import { mapMutations, mapState } from 'vuex' */
import cartMixin from '../../mixins/cart'

export default {
  name: 'home',
  data () {
    return {
      banners: [],
      cates: [], //宫格导航分类
      recommendId: 72399,
      recommendItems: [],
      isLoading: false,
      isFirst: true
    }
  },
  mixins: [cartMixin],
  created () {
    this.fetchBanner()
    this.fetchCates()
    this.fetchItems()
  },
  activated () {
    console.log('我胡汉三又回来了')
    // this.$alert('哈哈哈，插件真简单')
  },
  methods: {
    add_cart (item) {
      // 点击加入购物车
      console.log(item)
      // 默认购买一件，默认选中
      item.num = 1
      item.isChecked = true
      this.add_Cart(item)
     /*  // 添加购物车之前 判断购物车中是否已经有该商品
      let isExist = this.items.find(el => el.id === item.id )
      if (isExist) {
        // 购物车中已经存在该商品
        Toast('购物车中已经有该商品，请勿重复添加')
        return;
      }
      this.addCart(item)
      Toast('添加成功，请前往付钱吧') */
    },
    enterDetail ({ id, index }) {
      // 点击商品进入详情
      this.$router.push(`/detail/${id}`)
    },
    onRefresh () {
      // 下拉刷新
      console.log("下拉了");
      this.fetchItems();
    
    },
    fetchBanner () {
      // 获取banner数据
      /* this.$http.get('/conner/banner/list').then(res=>{
        console.log(res)
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      }) */
      fetchHomeBanner().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    async fetchCates () {
      // 获取分类数据 宫格导航
      const res = await fetchAllCates()
    
      if (res.data.code === 0) {
        this.cates = res.data.data
      }
    },
    // 请求 推荐商品
    fetchItems () {
      fetchItems({
        categoryId: this.recommendId
      }).then(res => {
        console.log(res)
        if(res.data.code === 0){
          if (!this.isFirst) {
            Toast("刷新成功了")
          }
          this.isFirst = false
          this.isLoading = false
          this.recommendItems = res.data.data
          
        }
      })
    },
    /* ...mapMutations('cart', ['addCart']) */
  },
  /* computed: {
    ...mapState({
      items: (state) => state.cart.items
    })
  }, */
  components: {
    MyTabbar,
    HomeHead,
    Recommend
  }
}
/* 
find
findIndex
*/
</script>

<style lang="scss" scoped>
.wrap{
  padding:50px 0 53px 0;
  .my-swipe{
    img{
      width:100%;
    }
  }
}
/deep/ .van-grid-item .van-icon__image{
  width: 2em;
  height: 2em;
}

</style>
